{% extends "base.html" %}
{% load i18n %}
{% load promgen %}

{% block title %}
Promgen / Project / {{ project.name }}
{% endblock %}

{% block content %}

<div class="page-header promgen-flex-space-between-center">
  <div v-pre>
    <h1>
      Project: {{ project.name }}
    </h1>
  </div>

  {% include "promgen/project_action_button_group.html" %}
</div>

{% breadcrumb project %}

{% if project.notifiers.count == 0 and project.service.notifiers.count == 0 %}
<div class="alert alert-warning" role="alert">
  <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
  <span class="sr-only">Warning:</span>
  {% trans 'No notifications configured for this project. Please configure some' %}
</div>
{% endif %}

{% if project.description %}
<div class="panel panel-default">
  <div v-pre class="panel-body">
    {{project.description|linebreaksbr|urlize}}
  </div>
</div>
{% endif %}

<div class="panel panel-danger" v-cloak v-if="activeProjectAlerts.has('{{project.name}}')">
  <div class="panel-heading">
    <a @click="toggleCollapse('alerts-project-{{project.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
  </div>
  <table id="alerts-project-{{project.name|slugify}}" class="table table-bordered table-condensed collapse">
    <tr v-for="alert in activeProjectAlerts.get('{{project.name}}')">
      {% include 'promgen/alert_row.html' %}
    </tr>
  </table>
</div>

<a
  v-cloak
  v-if="getActiveSilencesForProject('{{project.name}}', '{{project.service.name}}').length > 0"
  @click="openSilenceListModal(null, silences=getActiveSilencesForProject('{{project.name}}', '{{project.service.name}}'), 'project')"
  class="btn btn-warning btn-sm mb-4"
  role="button"
>
  Active silences
</a>

<div class="panel panel-default">
  <div v-pre class="panel-body">
    Datasource: <a href="{{project.shard.get_absolute_url}}">{{project.shard.name}}</a>
    (<a href="{{project.shard.url}}">{{project.shard.url}}</a>)
  </div>
</div>

<ul class="nav nav-tabs mb-5" role="tablist">
  <li role="presentation" class="active"><a href="#exporters" data-toggle="tab">Exporters</a></li>
  <li role="presentation"><a href="#hosts" data-toggle="tab">Hosts</a></li>
  <li role="presentation"><a href="#rules" data-toggle="tab">Rules</a></li>
  <li role="presentation"><a href="#http-checks" data-toggle="tab">HTTP Checks</a></li>
  <li role="presentation"><a href="#notifiers" data-toggle="tab">Notifiers</a></li>
  <li role="presentation"><a href="#members" data-toggle="tab">Members</a></li>
</ul>

<div class="well">

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="exporters">
    {% include "promgen/project_detail_exporters.html" %}
    </div>

    <div role="tabpanel" class="tab-pane" id="hosts">
    {% include "promgen/project_detail_hosts.html" %}
    </div>

    <div role="tabpanel" class="tab-pane" id="rules">
    {% include "promgen/project_detail_rules.html" %}
    </div>

    <div role="tabpanel" class="tab-pane" id="http-checks">
    {% include "promgen/project_detail_urls.html" %}
    </div>

    <div role="tabpanel" class="tab-pane" id="notifiers">
    {% include "promgen/project_detail_notifiers.html" %}
    </div>

    <div role="tabpanel" class="tab-pane" id="members">
      <div class="alert alert-warning" role="alert">
        {% trans "This is a transitional release. Even if you are able to assign roles to members, the permission checks are actually disabled. They will be enabled in the next release." %}
      </div>
      {% include "promgen/permission_block.html" with object=project %}
    </div>
  </div>

</div>

{% endblock %}
